<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>作业1-点击往下掉，再点击，再飘回来……一直循环</title>
</head>
<style>
    div {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: red;
    }
</style>
<script src="js/gt.js"></script>
<script>
    window.onload = function (){
        var str = '';
        var num = 0;
        var oBody = document.body;
        var timer = null;
        var oDiv = document.getElementsByTagName('div');
        var onOff = true;
        for(var j = 0; j < 20; j++){
            str += '<div style="left:'+ (10 + j * 60) + 'px' +';">' + '</div>';
        }
        oBody.innerHTML = str;

        document.onclick = function() {
            if(!onOff){
                return console.log(onOff +' : 阻止');
            }
            clearInterval(timer);
            if(num < oDiv.length && num != oDiv.length){
                console.log(onOff +' : 开始' + ' ' + num);
                onOff = !onOff;
                timer = setInterval(function(){
                    gtMove(oDiv[num],'top',9,400);
                    num++;
                    if(num === oDiv.length){
                        clearInterval(timer);
                        onOff = !onOff;
                        console.log(onOff +' : 完成' + ' ' + num);
                    }
                },100)
            }else if(num != 0 && onOff){
                console.log(onOff +' : 开始' + ' ' + num);
                onOff = !onOff;
                timer = setInterval(function(){
                    num--;
                    gtMove(oDiv[num],'top',9,0);

                    if(num === 0){
                        clearInterval(timer);
                        onOff = !onOff;
                        console.log(onOff +' : 完成' + ' ' + num);
                    }
                },100)
            }else{
                num = 0;
            }
        }
    }
</script>
<body>

</body>
</html>